<template>
  <div class="main_container">
    <!-- <el-button @click="testDelete">清理数据</el-button> -->
    <!-- <el-button @click="inviteToPk">test邀请PK</el-button> -->
    <div class="left">
      <div class="left_up_out">
        <div class="left_up">
          <div class="left_up_left">
            <div class="img_box bd_radio">
              <img
                class="bd_radio"
                :src="store.loginer.user?.headimgurl"
                alt=""
              />
            </div>
            <div class="info">
              <div class="name fff">{{ loginUsr?.user?.nickname }}</div>
              <div class="id">{{ loginUsr?.user?.id }}</div>
            </div>
          </div>

          <div class="left_up_right">
            <div class="sorts cur_poi">
              <div class="img_box">
                <img src="../assets/crown.png" alt="" />
              </div>
              <span class="fff sort_name" @click="handleContribution"
                >贡献榜</span
              >
            </div>
            <div class="sorts cur_poi" @click="store.isPkDialog = true">
              <div class="img_box">
                <img src="../assets/pk.png" alt="" />
              </div>
              <span class="fff sort_name" @click="handleUnName">无名次</span>
            </div>
          </div>
        </div>
        <div class="micro fs_14 bs_bdb">
          <!-- <div class="btn cur_poi bs_bdb fff" @click="handleMike(0)">
            {{ store.openOffMike ? "开麦" : "闭麦" }}
          </div> -->
          <div
            v-if="switchTyp"
            class="btn cur_poi bs_bdb fff"
            @click="handleMike()"
          >
            上麦
          </div>
          <div v-else class="flex_row">
            <div @click="handleMute" class="btn cur_poi bs_bdb fff">
              {{ store.openOffMike ? "开麦" : "闭麦" }}
            </div>
            <div class="btn cur_poi bs_bdb fff" @click="leaveChannel">下麦</div>
          </div>
          <!-- <div class="btn cur_poi bs_bdb fff" @click="inviteJoin">邀请pk</div> -->
        </div>
      </div>
      <div class="left_down">
        <div class="lists curs_poin">
          <div
            @click="handleLefTab(item)"
            :class="{ active_tab: leftTabCurr === item.id }"
            class="item"
            v-for="item in leftTabs"
            :key="item.id"
          >
            <div>{{ item.label }}</div>
          </div>
          <div class="item">
            <img
              src="../assets//arr_down.png"
              style="width: 16px; height: 16px"
              alt=""
            />
          </div>
        </div>
        <div class="overflow_box">
          <div
            :class="{ isSelec: isSelecUsr === item.id }"
            id="left_item"
            class="cur_poi item_content flex_row"
            v-for="(item, index) in getLeftUsrList"
            :key="item.id"
            :ref="(el) => (elementList[index] = el)"
            @contextmenu="
              ($event) => {
                showMenu($event, index, item);
              }
            "
          >
            <div class="avatar">
              <img :src="item.headimgurl" alt="" />
              <img
                v-if="item.isjinyan"
                class="muted_avatar"
                src="../assets/muted.png"
                alt=""
              />
            </div>
            <div class="info flex_colm bs_bdb fff">
              <div class="fs_16">{{ item.nickname }}</div>
              <div class="icons_sort flex_row">
                <!-- <div class="bg_sort fs_8 bs_bdb">1</div>
                <div class="bg_sort fs_8 bs_bdb">1</div> -->
                <img
                  style="width: 30px; height: 20px"
                  :src="store.mapperLevel[item.wealthtile]"
                  alt=""
                />
                <img
                  style="width: 30px; height: 20px"
                  :src="store.mapperLevel[item.charmtitle]"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mind">
      <!-- <pushCptsVue /> -->
      <!-- <pullCptsVue /> -->
      <!-- <div id="local-player" class="player" v-if="isPlay">
        <div class="closePlayer" @click="leaveChannel">关闭直播</div>
      </div> -->
      <div
        class="player"
        :class="{ player_column: currentDevTyp === 1 }"
        v-if="isPlay"
      >
        <div
          class="flayer_box bs_bdb flayer_box2"
          v-if="Object.keys(playerList).length > 2"
        >
          <div class="common bs_bdb" id="local-player"></div>
          <div
            class="common bs_bdb"
            :id="'other-player' + key"
            v-for="(item, key) in playerList"
            :key="key"
          ></div>
        </div>
        <div class="flayer_box bs_bdb" v-else>
          <div class="me" id="local-player"></div>
          <div
            class="other bs_bdb"
            v-if="
              Object.keys(playerList).length !== 0 &&
              Object.keys(playerList).length < 3
            "
          >
            <div
              name="other"
              class="item bs_bdb"
              :id="'other-player' + key"
              v-for="(item, key) in playerList"
              :key="key"
            ></div>
          </div>
        </div>
        <div class="closePlayer" @click="leaveChannel">关闭直播</div>
      </div>
      <div class="mind_up" v-else>
        <div class="mind_up_inner">
          <el-form>
            <div class="fff title">直播标题</div>
            <el-form-item>
              <el-input placeholder="请输入标题" v-model="formData.title" />
            </el-form-item>
            <div class="fff title">粉丝看到的开播提醒</div>
            <el-form-item>
              <el-input
                placeholder="请输入开播提醒"
                style="width: 330px"
                v-model="formData.tip"
                autocomplete="off"
              />
            </el-form-item>
            <div class="fff title">请选择开播设备</div>
            <el-form-item>
              <el-select
                @change="changeSelectVedio"
                v-model="formData.deviceVedio"
                placeholder="请选择装备类型"
              >
                <el-option
                  :label="item.label"
                  :value="item.deviceId"
                  v-for="item in deviceVedioList"
                  :key="item.deviceId"
                />
              </el-select>
            </el-form-item>
            <div class="fff title">请选择麦克风</div>
            <el-form-item>
              <el-select
                @change="changeSelectAudio"
                v-model="formData.deviceAudio"
                placeholder="请选择麦克风类型"
              >
                <el-option
                  :label="item.label"
                  :value="item.deviceId"
                  v-for="item in deviceAudioList"
                  :key="item.deviceId"
                />
                <!-- <el-option label="Zone two" value="beijing" /> -->
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="device_box">
                <div
                  class="deviceTyp curs_poin fff"
                  :class="{ active_devi: currentDevTyp === 1 }"
                  @click="handlerDevice(1)"
                >
                  <img src="../assets/column.png" alt="" />
                  <span>竖屏</span>
                </div>
                <div
                  class="deviceTyp curs_poin fff"
                  :class="{ active_devi: currentDevTyp === 0 }"
                  @click="handlerDevice(0)"
                >
                  <img src="../assets/row.png" alt="" />
                  <span style="margin-left: 6px">横屏</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <!-- 这条数据是要的 -->
              <div class="startPlay fff" @click="join">开始直播</div>
              <!-- <div class="startPlay fff" @click="store.startLive = true">
                开始直播
              </div> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="mind_down">
        <!-- 随机盒子 -->
        <div class="random_box">
          <!-- <img src="../../public/logo.jpg" alt=""> -->
        </div>
        <div class="inner">
          <div class="tabs">
            <div
              @click="handleMinTab(item)"
              :class="{ active_tab: currVal == item.id }"
              class="tabs_item"
              v-for="(item, i) in tabs"
              :key="i"
            >
              {{ item.label }}
            </div>
          </div>
          <div class="out">
            <div class="content fff">
              <!-- <div class="txt">
                我们提倡健康的直播环境，禁止谩骂、色情低俗、政治敏感内容
              </div> -->
              <div class="txt2 flex_colm fs_14" v-if="store.welcomeSD">
                {{ store.welcomeSD?.nickname }}来了
              </div>
              <div v-if="currVal === 1 || currVal === 3">
                <div
                  class="txt"
                  v-for="(msgIt, i) in mapperMinTabs[currVal]"
                  :key="i + 'mid'"
                >
                  <span style="color: blue">{{
                    `${msgIt?.senduser?.nickname}`
                  }}</span>
                  &nbsp; 赠送给 &nbsp;
                  <span style="color: blue">{{
                    `${msgIt?.touser?.nickname}`
                  }}</span>
                  {{
                    `价值 &nbsp;${msgIt?.gift?.coin} &nbsp;心钻的 &nbsp;${msgIt?.gift?.name}x${msgIt?.gift?.num}`
                  }}
                </div>
              </div>
            </div>
            <div class="icons">
              <div class="left_item">
                <div
                  class="item"
                  v-for="icon in iconLef"
                  :key="icon.id"
                  @click="handleIcos(icon.id)"
                >
                  <img :src="icon.url" alt="" />
                </div>
              </div>
              <div class="right_item">
                <div
                  class="item"
                  v-for="icon in iconRig"
                  :key="icon.id"
                  @click="handleIcos(icon.id)"
                >
                  <img :src="icon.url" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_up fff">
        <div class="switch">
          <div class="title">连麦列表</div>
          <el-switch v-model="isSwitch" />
        </div>
        <div class="tabs">
          <div
            @click="handleRigTab(item)"
            class="item cur_poi"
            v-for="item in rightTabs"
            :key="item.id"
            :class="{ active_tab: chooseItem === item.id }"
          >
            {{ item.label }}
          </div>
        </div>
        <div
          v-if="chooseItem === 1"
          style="height: 230px; overflow-y: auto; background: #1d1f22"
        >
          <div
            class="chat_text flex_bt fff"
            v-for="item in store.rightTrueUsr"
            :key="item.id"
          >
            <div class="info flex_bt">
              <div class="avator">
                <img :src="item.headimgurl" alt="" />
              </div>
              <div class="nickname">{{ item.nickname }}</div>
            </div>
            <div class="btn cur_poi" @click="handleInvite(item)">邀请</div>
          </div>
        </div>
        <!-- 申请上麦 -->
        <div
          v-if="chooseItem === 2"
          style="height: 230px; overflow-y: auto; background: #1d1f22"
        >
          <div
            class="chat_text flex_bt fff"
            v-for="item in store.mikeAskInf"
            :key="item.id"
          >
            <div class="info flex_bt">
              <div class="avator">
                <img :src="item?.headimgurl" alt="" />
              </div>
              <div class="nickname">{{ item?.nickname }}</div>
            </div>
            <div class="flex_row two_btn">
              <div
                class="btn reju cur_poi"
                style="margin-right: 10px; background: #282c2f; color: #aaa"
                @click="handleAskMike(item, 2)"
              >
                拒绝
              </div>
              <div class="btn cur_poi" @click="handleAskMike(item, 1)">
                同意
              </div>
            </div>
          </div>
        </div>
        <!-- 上麦管理 -->
        <div
          v-if="chooseItem === 3"
          style="height: 230px; overflow-y: auto; background: #1d1f22"
        >
          <div
            class="chat_text flex_bt fff"
            v-for="item in store.mikeManageInf"
            :key="item.id"
          >
            <div class="info flex_bt">
              <div class="avator">
                <img :src="item?.headimgurl" alt="" />
              </div>
              <div class="nickname">{{ item?.nickname }}</div>
            </div>
            <div class="btn cur_poi" @click="handleTickManage(item)">踢出</div>
          </div>
        </div>
        <div id="msg_scroll" class="out_msg_bg bs_bdb" v-if="store.sendInfo">
          <div
            class="msg_bg flex_colm bs_bdb"
            v-for="item in store.rightMsgList"
            :key="item.user.id"
          >
            <div class="info fs_14">{{ item.user.nickname }}</div>
            <div class="msg fs_14">
              <span style="color: #ebd64f"></span> {{ item.msg }}
            </div>
          </div>
        </div>
      </div>
      <div class="right_down">
        <div class="img_box">
          <div class="imgs curs_poin" v-for="(item, i) in 3" :key="i">
            <img src="../assets/meme.png" alt="" />
          </div>
          <div class="text">500钻石1条，全站可见</div>
        </div>
        <el-input
          resize="none"
          v-model.trim="inpMsg"
          :rows="5"
          type="textarea"
          placeholder="发送信息"
        />
        <!-- 脱离 -->
        <div class="btn_box flex_row">
          <div class="btn fs_12 bs_bdb fff" @click="quickReply(1)">
            快捷回复
          </div>
          <div class="btn fs_12 bs_bdb fff" @click="toSendMsg">发送</div>
        </div>
        <div class="fastReply bs_bdb flex_colm" v-if="isQuickReply">
          <div v-if="true">
            <!-- 1 -->
            <div class="title flex_bt bs_bdb">
              <div>
                <div
                  v-if="swithQuickShow"
                  class="left_btn fs_12 fff bs_bdb cur_poi"
                  @click="swithQuickShow = !swithQuickShow"
                >
                  添加
                </div>
                <img
                  v-if="!swithQuickShow"
                  @click="swithQuickShow = !swithQuickShow"
                  style="width: 9px; height: 16px; padding: 15px"
                  src="../assets/quick_4.png"
                  alt=""
                />
              </div>

              <div class="fff fs_16">
                快捷回复语
                <!-- 添加回复语 -->
              </div>
              <div class="right_close cur_poi bs_bdb" @click="quickReply(0)">
                <img
                  style="width: 25px; height: 25px"
                  src="../assets/close_head.png"
                  alt=""
                />
              </div>
            </div>
            <!-- 2 -->
            <div class="content" v-if="!swithQuickShow">
              <div>
                <el-input
                  resize="none"
                  :rows="7"
                  type="textarea"
                  placeholder="发送信息"
                />
              </div>

              <div class="fs_13 add_btn bs_bdb fff">确认添加</div>
            </div>
            <!-- 2 -->
            <div class="content bs_bdb fff" v-if="swithQuickShow">
              <div
                @click="quickReplyMsg(item)"
                class="txt fs_14 cur_poi flex_bt"
                v-for="(item, i) in quickReplyList"
                :key="item.id"
              >
                <div class="txt_inner">
                  {{ item.msg }}
                </div>
                <el-popover
                  :popper-style="{ 'min-width:': '50px' }"
                  placement="bottom"
                  :visible="quickVisible[`quickVisible${i}`]"
                  :width="50"
                  trigger="click"
                >
                  <div class="flex_colm" style="justify-content: space-between">
                    <div
                      @click="moveTopMsg(item, i)"
                      class="up_down_flex cur_poi"
                      style="margin-bottom: 10px"
                    >
                      <img
                        style="width: 16px; height: 16px"
                        src="../assets/quick_reply_2.png"
                        alt=""
                      />
                      移动最前
                    </div>
                    <div
                      @click="deleteMsg(item, i)"
                      class="up_down_flex cur_poi"
                    >
                      <img
                        style="width: 16px; height: 16px"
                        src="../assets/quick_reply_3.png"
                        alt=""
                      />删除
                    </div>
                  </div>
                  <template #reference>
                    <div
                      @click="quickVisible[`quickVisible${i}`] = true"
                      class="bs_bdb"
                      style="padding: 5px 15px"
                    >
                      <img
                        style="width: 15px; height: 4px"
                        src="../assets/quick_reply_1.png"
                        alt=""
                      />
                    </div>
                  </template>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出控件 -->
    <div class="playDialog" v-if="isPlayDialog||store.mapperFoot['foot3']">
      <img @click="closePlayDialog"
    
        class="clos_img cur_poi"
        src="../assets/close_head.png"
        alt=""
      />
      <div class="title_dial fff bs_bdb">开播选择</div>
      <div class="mind_up_inner">
        <el-form>
          <div class="fff title">请选择开播设备</div>
          <el-form-item>
            <el-select
              v-model="formData.deviceVedio"
              placeholder="请选择装备类型"
            >
              <el-option
                :label="item.label"
                :value="item.deviceId"
                v-for="item in deviceVedioList"
                :key="item.deviceId"
              />
            </el-select>
          </el-form-item>
          <div class="fff title">请选择麦克风</div>
          <el-form-item>
            <el-select
              v-model="formData.deviceAudio"
              placeholder="请选择麦克风类型"
            >
              <el-option
                :label="item.label"
                :value="item.deviceId"
                v-for="item in deviceAudioList"
                :key="item.deviceId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="device_box">
              <div
                class="deviceTyp curs_poin fff"
                :class="{ active_devi: currentDevTyp === 1 }"
                @click="handlerDevice(1)"
              >
                <img src="../assets/column.png" alt="" />
                <span>竖屏</span>
              </div>
              <div
                class="deviceTyp curs_poin fff"
                :class="{ active_devi: currentDevTyp === 0 }"
                @click="handlerDevice(0)"
              >
                <img src="../assets/row.png" alt="" />
                <span style="margin-left: 6px">横屏</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item style="justify-content: center; width: 100%">
            <div class="startPlay fff" @click="join">开始直播</div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 被邀请方的对话框 -->
    <el-dialog
      style="height: 300px; background: #ffffff"
      :modal="false"
      v-model="store.isWatchOthrInvite"
      align-center
    >
      <div class="mian txt_cent">{{ store.inviteMsg?.message }}</div>
      <template #footer>
        <div class="dialog-footer" style="margin: auto; text-align: center">
          <el-button @click="invitedDialog(2, store.inviteMsg.type)"
            >拒绝</el-button
          >
          <el-button @click="invitedDialog(1, store.inviteMsg.type)">
            同意
          </el-button>
        </div>
      </template>
    </el-dialog>
    <pkCptsVue v-if="store.isPkDialog" />
    <liveProfileCpts v-if="store.isLivePro" />
    <privateChatCptsVue v-if="store.isPrivateChat" />
    <contribuCptsVue v-if="store.isContrib" />
    <giftCpts v-if="store.isGiftDialog" />
    <livePkCpts
      v-if="store.isLivePkDialog"
      :isShowFather="isShowSeat"
      :seatFatherArr="seatArr"
      :inviteToPk="inviteToPk"
    />
  
  </div>
</template>

<script setup>
import {
  onUpdated,
  onMounted,
  ref,
  reactive,
  nextTick,
  computed,
  watch,
} from "vue";
import liveProfileCpts from "../components/liveProfileCpts.vue";
import {
  getRooms,
  getTokenByRoomId,
  getPaihang,
  getmyliveroom,
  getuserinfo,
  getFollow,
  getUnFollow,
  getchatlist,
  $TipMessage,
  getReportApi,
  deletData,
} from "../http";
import agoraRtc from "agora-rtc-sdk-ng";
import img from "../utils";
import pkCptsVue from "./pkCpts.vue";
import { useCounterStore } from "../store";
import { CustomMouseMenu } from "@howdyjs/mouse-menu";
import privateChatCptsVue from "./privateChatCpts.vue";
import contribuCptsVue from "./contribuCpts.vue";
import giftCpts from "./giftCpts.vue";
import livePkCpts from "./livePkCpts.vue";
import testData from "../utils/data.json";
// 开启日志上传功能
agoraRtc.enableLogUpload();
// 将日志输出级别设置为 INFO
agoraRtc.setLogLevel(0);
const player = ref({});
console.log("testData", testData);
let channelMediaConfig = null;
const operationStat = ref(1);
const isShowSeat = ref(false);
const pkModule = ref(1); //1 :1v1, 2:1:2, 3:1v3 ,4:2v2
// todo
const exitStatus = ref(1); // 1 自己退出 2 踢出别人
const pkStatus = ref(1); //1 :1v1, 2:1:2, 3:1v3 ,4:2v2
const seatArr=ref([]);
const isBdialog = ref(false);
const swithQuickShow = ref(true);
const testDelete = () => {
  console.log("清理数据1111111111111testDelete");
  deletData(store.loginer.jwt);
};
// todo

const { ipcRenderer } = require("electron");
const store = useCounterStore();

const isSelecUsr = ref(0);
const switchTyp = ref(true);
const isPlayDialog = ref(false);
const myRoom = ref({});

const handleMute = () => {
  store.openOffMike = !store.openOffMike;
  localAudioTrack.value.audioTrack.setMuted(store.openOffMike);
};
const handleMike = () => {
  // if () {

  // }
  // switchTyp.value = !switchTyp.value;
  isPlayDialog.value = true;
  // join();
  // if (store.isLine && store.loginSD) {
  //   store.socketOB.socketSendMessage({
  //     c: "room",
  //     m: "joincontact",
  //     data: {
  //       uid: store.loginer.user.id,
  //       status: type,
  //     },
  //   });
  // } else {
  //   setTimeout(() => {
  //     handleMike();
  //   }, 1500);
  // }
};
// let el = document.querySelector("#left_item");
// el.oncontextmenu = function (e) {
//   e.preventDefault(); // 阻止默认的右键弹出菜单
//   menu.style.display = "block"; // 显示弹出框
//   menu.style.left = e.clientX + "px"; // 设置弹出框的位置
//   menu.style.top = e.clientY + "px";
// };

// // 监听鼠标左击事件
// box.onclick = function () {
//   menu.style.display = "none"; // 隐藏弹出框
// };
// // 监听鼠标左击和右击事件，防止默认行为
// document.onmousedown = function (e) {
//   if (e.button === 2 || e.button === 0) {
//     e.preventDefault();
//   }
// };
watch(
  () => store.goAsk,
  (nv) => {
    if (nv) {
      mikeAsk();
      store.goAsk = false;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const handleTickManage = (item) => {
  if (store.isLine) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "tickoutcontact",
      data: {
        uid: item.id,
      },
    });
  }
};
const handleAskMike = (item, status) => {
  console.log("拒绝status---1：同意2：：", status);
  // {"c":"room","m":"reviewcontact","data":{"uid":37528764,"status":1}}
  if (store.isLine) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "reviewcontact",
      data: {
        uid: item.id,
        status,
      },
    });
  }
};
const handleInvite = (usr) => {
  // {"c":"room","m":"invitecontact","data":{"uid":37528764}}
  if (store.isLine && store.loginSD) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "invitecontact",
      data: {
        uid: usr.id,
      },
    });
  } else {
    setTimeout(() => {
      doJoinRoom();
    }, 500);
  }
};

const getProfile = (data) => {
  return new Promise((resolve) => {
    getuserinfo(data).then((res) => {
      console.log("getProfile-res-------------", res);
      if (res.data.errcode === 0) {
        console.log("suceess------------------------", res);
        resolve(res.data);
      }
    });
  });
};
const elementList = ref([]);
const doChat = () => {
  store.socketChatOB.socketSendMessage({
    c: "chat",
    m: "ready",
    data: {
      frienduid: store.liveProInfo?.obj1?.id,
    },
  });
};
const getChats = () => {
  return new Promise((resolve) => {
    getchatlist({
      touid: store.liveProInfo.obj1.id,
      // touid: 81040047,
      uid: store.loginer.id,
      jwt: store.loginer.jwt,
    }).then((chatListRes) => {
      if (chatListRes.data.errcode === 0) {
        // chatArr.value = chatListRes.data.list;
        resolve(chatListRes);
      }
    });
  });
};
const showMenu = async (e, index, item) => {
  getlineuserAfterMuted();
  isSelecUsr.value = item.id;
  console.log("右击-----------------------", isSelecUsr.value);
  let info = await getProfile({
    userid: item.id,
    jwt: loginUsr.jwt,
  });
  store.liveProInfo = {
    obj1: item,
    obj2: info,
  };

  console.log(
    "右击菜单store.liveProInfo-------------------------------",
    store.liveProInfo
  );
  doChat();
  // 清空
  store.takePrivateSD = [];
  e.preventDefault();
  const MouseMenuCtx = CustomMouseMenu({
    el: elementList.value[index],
    menuList: [
      {
        fn: async (Params) => {
          store.isLivePro = true;
          // let info = await getProfile({
          //   userid: Params.item.id,
          //   jwt: loginUsr.jwt,
          // });
          // store.liveProInfo = {
          //   isfollow: info.isfollow,
          //   ...info.userinfo,
          //   ...Params.item,
          // };
          // store.liveProInfo = {
          //   obj1: Params.item,
          //   obj2: info,
          // };
        },
        label: "查看资料",
      },
      {
        fn: (Params) => {
          store.handleFollow();
        },
        label: store.liveProInfo?.obj2?.isfollow === 0 ? "关注" : "取消关注",
      },
      {
        fn: async (Params) => {
          console.log("私聊11111", Params);
          store.isPrivateChat = true;
          let chatsRes = await getChats();
          if (chatsRes.data.errcode === 0) {
            store.takePrivateSD = [...chatsRes.data.list];
          }
          console.log("store.takePrivateSD=", store.takePrivateSD);
          // {m":"ready","c":"chat","data":"frienduid":96045364}}
          // if (store.isLine && store.joinRoom) {
          //   store.socketOB.socketSendMessage({
          //     c: "chat",
          //     m: "ready",
          //     data: {
          //       frienduid: store.liveProInfo?.obj1?.id,
          //     },
          //   });
          // }
        },
        label: "私聊",
      },
      {
        fn: (Params) => {
          console.log("邀请", Params);
          store.liveProInfo = Params;
        },
        label: "邀请连麦",
      },
      {
        fn: (Params) => {
          console.log("禁言Params", Params);
          if (item.isjinyan) {
            console.log("it-------------------", item.isjinyan);
            store.socketOB.socketSendMessage({
              c: "room",
              m: "canceljinyan",
              data: {
                uid: Params.item.id,
              },
            });
          } else {
            store.socketOB.socketSendMessage({
              c: "room",
              m: "jinyan",
              data: {
                uid: Params.item.id,
              },
            });
          }
        },
        label: item.isjinyan === 0 ? "禁言" : "解除禁言",
      },
      {
        fn: (Params) => {
          let fd = new FormData();
          fd.append("type", 1);
          fd.append("touid", Params.item.id);
          fd.append("msg", "xxx");
          fd.append("img", "xxx");
          getReportApi(fd).then((res) => {
            console.log("举报接口--------------", res);
          });
        },
        label: "举报",
      },
      {
        fn: async (Params) => {
          console.log("before-----------------", Params.item.isadmin);
          if (!Params.item.isadmin) {
            store.socketOB.socketSendMessage({
              c: "room",
              m: "setadmin",
              data: {
                uid: Params?.item?.id,
              },
            });
          } else {
            store.socketOB.socketSendMessage({
              c: "room",
              m: "canceladmin",
              data: {
                uid: Params?.item?.id,
              },
            });
          }

          console.log("after-----------------", Params.item.isadmin);
        },
        label: item?.isadmin === 1 ? "取消管理员" : "设为管理",
      },
      {
        fn: (Params) => {
          console.log("邀请", Params);
          store.liveProInfo = Params;
          store.socketOB.socketSendMessage({
            c: "room",
            m: "tickout",
            data: { uid: item?.id },
          });
        },
        label: "踢出房间",
      },
    ],
    params: {
      index,
      item,
    },
  });
  const { x, y } = e;
  MouseMenuCtx.show(x, y);
};

const doJoinRoom = () => {
  console.log("进入房间");
  if (store.isLine && store.loginSD) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "joinroom",
      data: {
        // roomid: 147300,
        roomid: myRoom.value?.id,
      },
    });
  } else {
    setTimeout(() => {
      doJoinRoom();
    }, 1500);
  }
};

const getNickName = computed(() => {
  store.rightTrueUsr?.find((v) => {
    return inpMsg.value?.includes(v.nickname);
  });
});
const toSendMsg = (quickReplyVal = "") => {
  console.log("--------------toSendMsg--------------", quickReplyVal);
  nextTick(() => {
    handleScroll();
  });

  console.log("进入房间");
  if (store.isLine && store.loginSD) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "sendmessage",
      data: {
        msg: inpMsg.value === "" ? quickReplyVal : inpMsg.value,
        type: 1,
      },
    });
    inpMsg.value = "";
  } else {
    setTimeout(() => {
      doJoinRoom();
    }, 1500);
  }
};
const getonlineuser = () => {
  console.log("在线列表数据");
  if (store.isLine && store.joinRoom) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "getonlineuser",
      data: {},
    });
  } else {
    setTimeout(() => {
      getonlineuser();
    }, 500);
  }
};

const getlineuserAfterMuted = () => {
  console.log("条件--------------", store.isForbiTalk);
  if (store.isForbiTalk) {
    store.socketOB.socketSendMessage({
      c: "room",
      m: "getonlineuser",
      data: {},
    });
    store.isForbiTalk = false;
  } else {
    setTimeout(() => {
      getlineuserAfterMuted();
    }, 1500);
  }
};

const loginUsr = JSON.parse(localStorage.getItem("info"));
// const onlineUser = ref([]);
// const trueUser = ref([]);

const iconType = ref(0);
const lineUsrCurr = ref(0);
const isSwitch = ref(false);
const chooseItem = ref(1);
const leftTabCurr = ref(1);
const isPkDialog = ref(false);
const getLeftUsrList = computed(() => {
  let list = [];
  switch (leftTabCurr.value) {
    case 1:
      list = store.leftOnLineUsr;
      break;
    case 2:
      list = store.nobleUsrs;
      break;
    case 3:
      list = store.adminUsrs;
      break;

    default:
      list = [];
      break;
  }
  return list;
});
const leftTabs = ref([
  {
    label: "在线用户",
    id: 1,
  },
  {
    label: "贵族",
    id: 2,
  },
  {
    label: "管理",
    id: 3,
  },
]);
const rightTabs = ref([
  {
    label: "活跃用户",
    id: 1,
  },
  {
    label: "上麦申请",
    id: 2,
  },
  {
    label: "连麦管理",
    id: 3,
  },
]);
const preImg = "../assets/main_imgs/";
const iconLef = [
  {
    url: new URL("../assets/main_imgs/main_skin.png", import.meta.url).href,
    id: 1,
  },
  {
    url: new URL("../assets/main_imgs/main_beauty.png", import.meta.url).href,
    id: 2,
  },
  {
    url: new URL("../assets/main_imgs/l_main_liwu.png", import.meta.url).href,
    id: 3,
  },
  {
    url: new URL("../assets/main_imgs/main_car.png", import.meta.url).href,
    id: 4,
  },
  {
    url: new URL("../assets/main_imgs/main_renqi.png", import.meta.url).href,
    id: 5,
  },
];
const iconRig = [
  {
    url: new URL("../assets/main_imgs/main_active.png", import.meta.url).href,
    id: 6,
  },
  {
    url: new URL("../assets/main_imgs/main_star.png", import.meta.url).href,
    id: 7,
  },
  {
    url: new URL("../assets/main_imgs/main_funk.png", import.meta.url).href,
    id: 8,
  },
  {
    url: new URL("../assets/main_imgs/main_grop.png", import.meta.url).href,
    id: 9,
  },
  {
    url: new URL("../assets/main_imgs/main_pk.png", import.meta.url).href,
    id: 10,
  },
  {
    url: new URL("../assets/main_imgs/r_main_liwu.png", import.meta.url).href,
    id: 11,
  },
];
const inpMsg = ref("");
// inpMsg.value=store.inpValSend
//111111 create client
let client = {};
let localAudioTrack = reactive(null);
let localVideoTrack = reactive(null);
const playerList = reactive({});
const uid = ref(null);
// let options = ({
//   appid: "627e451e415a40c893aba7d811136398",
//   channelName: "",
//   token: "",
//   ...player.value,
//   uid: null,
// });
// 测试用
let testUid = null;
// console.log("agoraRtc", agoraRtc);
//监听"user-published"事件的回调（监听到有别的用户加入，自己开的直播不算）
// const handleUserPublished = (user, mediaType) => {
//   console.log("监听到有别的用户加入", user);
//   const id = user.uid;
//   subscribe(user, mediaType);
// };
//监听"user-unpublished"事件的回调（监听到有别的用户加入，自己退出的不算）
// const handleUserUnpublished = (user) => {
//   const id = user.uid;
//   let index = otherUsers.value.findIndex((v) => v.id === id);
//   otherUsers.value.splice(index, 1);
// };
const joinInit = async () => {
  return new Promise(async (resolve) => {
    client = agoraRtc.createClient({
      mode: "live",
      codec: "vp8",
      role: "host",
    });
    // 监听发布流
    client.on("user-published", async (user, mediaType) => {
      console.log("监听发布流-------------------", user.uid);
      const id = user.uid;
      playerList[id] = user;
      console.log("playerList---------------------", playerList);
      await client.subscribe(user, mediaType);
      if (mediaType === "video") {
        user.videoTrack.play("other-player" + id);
      }
      if (mediaType === "audio") {
        user.audioTrack.play();
      }
    });
    // 监听关闭流
    client.on("user-unpublished", (user) => {
      console.log("监听关闭流-------------------", user);
      const id = user.uid;
      delete playerList[id];
      if (!Object.keys(playerList).length) {
        client
          .stopChannelMediaRelay()
          .then(() => {
            channelMediaConfig = null;
            console.log("---res-----退出pk--------");
          })
          .catch((err) => {
            console.log("--err--退出失败----------", err);
          });

        channelMediaConfig = null;
      }
      // localVideoTrack?.stop();
      // localAudioTrack?.stop();
      // leave();
    });
    resolve();
  });
  // 创建本地轨道，使用麦克风和摄像头
  // localAudioTrack.value = await agoraRtc.createMicrophoneAudioTrack();
  // localVideoTrack.value = await agoraRtc.createCameraVideoTrack();
};
//加入直播（自己加入）
const join = async () => {
  await joinInit();
  switchTyp.value = !switchTyp.value;
  isPlayDialog.value = false;
  isPlay.value = true;
  //对id为local-player的元素创建video开启直播，本人开启的直播窗口
  nextTick(async () => {
    if (formData.value.deviceVedio.includes("window")) {
      windowsPlay();
    } else {
      localAudioTrack = await agoraRtc.createMicrophoneAudioTrack({
        microphoneId: store.changeSelectEvtValAudio,
      });
      localVideoTrack = await agoraRtc.createCameraVideoTrack({
        cameraId: store.changeSelectEvtValVedio,
      });
      localVideoTrack.play("local-player");
    }
    testUid = await client.join(
      "627e451e415a40c893aba7d811136398", // 替换App ID
      player.value.channelName,
      player.value.token,
      player.value.uid
    );
    // 清欢欢
    // testUid = await client.join(
    //   testData.appid, // test data
    //   testData.opt1.channelName,
    //   testData.opt1.token,
    //   null
    // );
    // 箐
    // testUid = await client.join(
    //   testData.appid, // test data
    //   testData.opt2.channelName,
    //   testData.opt2.token,
    //   null
    // );
    console.log("testUid-------------", testUid);
    // 发布自己的频道
    await client.publish([localAudioTrack, localVideoTrack]);
  });
};

//退出直播间（自己退出）
const leaveChannel = async () => {
  try {
    client?.stopChannelMediaRelay && client.stopChannelMediaRelay();
    channelMediaConfig = null;
    console.log("退出直播间成功-------------------");
  } catch (error) {
    console.log("退出直播间失败--------------- error");
  }
  isPlay.value = !isPlay.value;
  switchTyp.value = !switchTyp.value;
  //停止音频，关掉音频
  if (localAudioTrack) {
    localAudioTrack.stop();
    localAudioTrack.close();
  }

  //停止视频，关掉视频
  if (localVideoTrack) {
    localVideoTrack.stop();
    localVideoTrack.close();
  }
  uid.value = null;
  for (let key in playerList) {
    delete playerList[key];
  }
  //注销client节省空间
  await client.leave();
  // client = {};
};

//创建连接人（可能有多个傻逼）
// const subscribe = async (user, mediaType) => {
//   const uid = user.uid;
//   // subscribe to a remote user
//   await client.subscribe(user, mediaType);
//   if (mediaType === "video") {
//     let obj = {
//       uid: `player-${uid}`,
//     };
//     console.log("1111111111111obj", obj);
//     otherUsers.value.push(obj);
//     nextTick(() => {
//       user.videoTrack.play(`player-${uid}`);
//     });
//   }
//   if (mediaType === "audio") {
//     user.audioTrack.play();
//   }
// };
// 11111

const isPlay = ref(false);
// const otherUsers = ref([]);
const currentDevTyp = ref(0);
const currVal = ref(1);
const liveType = ref("live");
const formData = ref({
  title: "",
  tip: "",
  deviceAudio: "",
  deviceVedio: "",
});
const tabs = ref([
  {
    id: 1,
    label: "全部",
  },
  {
    id: 2,
    label: "进房",
  },
  {
    id: 3,
    label: "幸运",
  },
]);

const handlerDevice = (cur) => {
  console.log("1111");
  currentDevTyp.value = cur;
};
// 获取all房间
const getRoomList = () => {
  getRooms().then((res111) => {
    console.log("res111", res111);
    if (res111.errcode === 0) {
      // getToken()
    }
  });
};

// // 根据房间id获取token
const getToken = (data) => {
  return new Promise((resolve) => {
    getTokenByRoomId(data).then((res222) => {
      resolve(res222.data);
    });
  });
};
const deviceAudioList = ref([]);
const deviceVedioList = ref([]);
const initDeviceList = async () => {
  let devices = await agoraRtc.getDevices();
  console.log("devices", devices);
  if (!devices.length) {
    return;
  }
  console.log(111);
  deviceAudioList.value = devices.filter(
    (device) => device.kind === "audioinput"
  );
  deviceVedioList.value = devices.filter(
    (device) => device.kind === "videoinput"
  );
  // 默认值
  formData.value.deviceAudio = deviceAudioList?.value[0]?.deviceId;
  formData.value.deviceVedio = deviceVedioList?.value[0]?.deviceId;
  console.log(
    "initDeviceList初始化设备----------------",
    deviceVedioList.value
  );
};
const changeSelectVedio = (e) => {
  console.log("changeSelectVedio-e---------------------", e);
  store.changeSelectEvtValVedio = e;
};
const changeSelectAudio = (e) => {
  console.log("changeSelectAudio-e---------------------", e);
  store.changeSelectEvtValAudio = e;
};
const getMyRoomInfo = async (whoJwt) => {
  return new Promise(async (resolve) => {
    let res = await getmyliveroom(whoJwt);
    if (res.data.errcode === 0) {
      myRoom.value = res.data.list[0];
      resolve(res);
    }
  });
};
const handleContribution = () => {
  store.isContrib = true;
  if (store.isContrib) {
    nextTick(() => {
      getSortList();
    });
  }
};
const handleUnName = () => {
  isPkDialog.value = true;
};
const getSortList = () => {
  let data = {
    roomid: myRoom.value?.id,
    type: 1,
    type1: 4,
    page: 1,
    limit: 10,
    jwt: store.loginer.jwt,
  };
  getPaihang(data).then((res) => {
    if (res.data.errcode === 0) {
      let arr2 = res.data.list.sort((a, b) => {
        return b.score - a.score;
      });
      let arr1 = arr2.splice(0, 3);
      store.contribuInfo = { arr2, arr1 };
    }
    console.log("贡献榜--------------------------", store.contribuInfo);
  });
};
const handleScroll = () => {
  let el = document.querySelector("#msg_scroll");
  nextTick(() => {
    el?.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
  });
};
// 麦管理
const mikeManage = () => {
  console.log("000000000000麦管理");
  if (store.isLine && store.joinRoom) {
    console.log("1111111111111麦管理");
    store.socketOB.socketSendMessage({
      c: "room",
      m: "getlivecontactlist",
      data: {},
    });
  }
};
// 麦申请
const mikeAsk = () => {
  console.log("0000000000000麦申请");
  if (store.isLine && store.joinRoom) {
    console.log("1111111111111麦申请");
    store.socketOB.socketSendMessage({
      c: "room",
      m: "applylivecontactlist",
      data: {},
    });
  }
};

const windowsPlay = async () => {
  const screenTrack = await agoraRtc
    ?.createScreenVideoTrack({
      electronScreenSourceId: formData.value.deviceVedio,
    })
    .then((localScreenTrack) => {
      console.log("windowsPlay--------------------", localScreenTrack);
      localScreenTrack.play("local-player");
      client.publish(localScreenTrack, (res) => {
        console.log("res", res);
      });
    });
};
const getResoures = () => {
  console.log("getResoures-into");
  ipcRenderer.on("resoures", (data, event) => {
    console.log("event-------------", event);
    let newAr = event.map((v) => {
      return {
        label: v.name,
        deviceId: v.id,
        ...v,
      };
    });

    deviceVedioList.value = [...newAr, ...deviceVedioList.value];
  });
  ipcRenderer.send("process-all");
};

//
// 1v1
let pkObj = {
  myself: {},
  other: {},
};

const doLoopGetCreateTeamInfo = async (isjoin) => {
  console.log("isjoin---------------------", isjoin, store.isTakeTeamInfo);
  if (store.isTakeTeamInfo) {
    console.log("store.createTeamInfo", store.createTeamInfo);
    if (isjoin === 1) {
      let index = store.createTeamInfo?.teams?.findIndex((v, i) => {
        return v.userinfo.id === store.loginer.user.id;
      });
      let obj = JSON.parse(JSON.stringify(store.createTeamInfo));
      let myself = {
        ...(obj?.teams?.splice(index, 1))[0],
      };
      let other = {
        ...obj?.teams[0],
      };

      // 拿到通道及其token 推流信息
      let otherToken = await getToken({
        jwt: "",
        roomid: other?.teamitem?.roomid,
        targetuid: other?.teamitem?.uid,
        type: 1,
      });
      let myseftToken = await getToken({
        jwt: store.loginer.jwt,
        roomid: myself?.teamitem?.roomid,
        targetuid: "",
        type: 1,
      });
      console.log("1111111111otherToken", otherToken);
      console.log("1111111111omyseftToken", myseftToken);
      pkObj["myself"] = {
        ...myseftToken,
      };
      pkObj["other"] = {
        ...otherToken,
      };
      console.log("pkObj", pkObj);
      console.log("同意才进来推流");
      inviteToPk(pkObj);
    }
    store.isTakeTeamInfo = false;
  } else {
    setTimeout(() => {
      doLoopGetCreateTeamInfo(isjoin);
    }, 500);
  }
};
watch(
  () => store.createTeamInfo,
  async (newVal) => {
    console.log("newVal------------WATCH", newVal);

    // let index = store.createTeamInfo?.teams?.findIndex((v, i) => {
    //   return v.userinfo.id === store.loginer.user.id;
    // });
    // let obj = JSON.parse(JSON.stringify(store.createTeamInfo));
    // pkObj.myself = {
    //   ...(obj?.teams?.splice(index, 1))[0],
    // };
    // pkObj.other = {
    //   ...obj?.teams[0],
    // };

    // // 拿到通道及其token 推流信息
    // let otherToken = await getToken({
    //   jwt: "",
    //   roomid: pkObj?.other?.teamitem?.roomid,
    //   targetuid: pkObj?.other?.teamitem?.uid,
    // });
    // let myseftToken = await getToken({
    //   jwt: store.loginer.jwt,
    //   roomid: pkObj?.myself?.teamitem?.roomid,
    //   targetuid: "",
    // });
    // pkObj["myself"]["myseftToken"] = myseftToken.data;
    // pkObj["other"]["otherToken"] = otherToken.data;
    // console.log("pkObj", pkObj);
  }
);

const inviteToPk = (configPk) => {
  // 清欢欢
  // let configPk = {
  //   other: {
  //     channelName: testData.opt2.channelName,
  //     token: testData.opt2.token,
  //   },
  //   myself: {
  //     channelName: testData.opt1.channelName,
  //     token: testData.opt1.token,
  //     uid: testUid,
  //   },
  // };
  // 箐
  // let configPk = {
  //   other: {
  //     channelName: testData.opt1.channelName,
  //     token: testData.opt1.token,
  //   },
  //   myself: {
  //     channelName: testData.opt2.channelName,
  //     token: testData.opt2.token,
  //     uid: testUid,
  //   },
  // };
  console.log(channelMediaConfig, "configPk-------------", configPk);
  if (!channelMediaConfig) {
    console.log("----------channelMediaConfig:", channelMediaConfig);
    // isLiveMyseft.value = 1; //自己
    channelMediaConfig = agoraRtc.createChannelMediaRelayConfiguration();
  }
  // 设置源频道信息
  channelMediaConfig.setSrcChannelInfo({
    // 源频道名
    channelName: configPk.myself.channelName,
    // 源频道里需要转发的主播的 uid
    // uid: configPk.myself.uid,
    uid: testUid,
    // uid: 0,
    // 需要用为 0 的 uid 和源频道名重新生成
    token: configPk.myself.token,
  });
  // 设置目标频道信息，可多次调用，最多设置 4 个目标频道
  channelMediaConfig.addDestChannelInfo({
    // 目标频道名
    channelName: configPk.other.channelName,
    // 用于标识目标频道中被转发的媒体流
    // uid 可为 0，也可自行设置，需确保与目标频道中的其他用户 ID 不同，防止造成互踢
    uid: 0,
    // uid: configPk.other.uid,
    // 需要用 uid 和目标频道名生成
    token: configPk.other.token,
  });

  // channelMediaConfig.addDestChannelInfo({
  //   // 目标频道名
  //   channelName: testData.opt1.channelName,
  //   // 用于标识目标频道中被转发的媒体流
  //   // uid 可为 0，也可自行设置，需确保与目标频道中的其他用户 ID 不同，防止造成互踢
  //   uid: 0,
  //   // 需要用 uid 和目标频道名生成
  //   token: testData.opt1.token,
  // });
  //更新数据
  client
    .updateChannelMediaRelay(channelMediaConfig)
    .then(() => {
      console.log("更新数据success");
    })
    .catch((e) => {
      console.log("更新数据 failed", e);
    });

  //todo
  client.on("channel-media-relay-state", (state, code) => {
    console.log("state-state------------", state);
    console.log("state-code-------------------", code);
  });
  client.on("channel-media-relay-event", (state, code) => {
    console.log("event-state", state);
    console.log("event-code", code);
  });
  //todo
  client
    .startChannelMediaRelay(channelMediaConfig)
    .then(() => {
      //todo
      console.log(`
      启动 success`);
      console.log("client===================>", client);

      //todo
    })
    .catch((e) => {
      //todo
      console.log(`启动 failed`, e);
      //todo
    });
};
// const othrShowOption = (agreeOrrejut, type = 1) => {
//   store.socketOB.socketSendMessage({
//     c: "room",
//     m: "videopkteamupcheck",
//     data: {
//       status: agreeOrrejut, // 1同意 2拒绝
//       type,
//       teamid: store.teamId,
//     },
//   });
// };
// todo
watch(
  () => store.inpValSend,
  (nv) => {
    inpMsg.value = nv;
    console.log("watch执行", inpMsg.value);
  }
);
// todo
watch(
  () => store.isWatchOthrInvit,
  (nv) => {
    console.log("watch-store.isWatchOthrInvit", nv);
    if (nv) {
      isBdialog.value = true;
      console.log("打开------------", isBdialog.value);
      store.isWatchOthrInvit = false;
    }
  },
  {
    immediate: true,
  }
);
watch(
  () => store.replySuccess,
  (nv) => {
    if (nv) {
      console.log("关闭------------", isBdialog.value);
      isBdialog.value = false;
    }
  }
);
const quickReplyList = ref([
  {
    msg: "美女",
    id: 1,
  },
  {
    msg: "这里怎么玩，我是萌新，求指教",
    id: 2,
  },
  {
    msg: "主播你有什么才艺吗?",
    id: 3,
  },
  {
    msg: "这首BGM叫什么，好好听",
    id: 5,
  },
  {
    msg: "主播主播，下次怎么找到你?",
    id: 4,
  },
  {
    msg: "听你唱歌想打赏，我唱歌别人想打我。",
    id: 6,
  },
]);
const quickVisible = ref({}); //quickVisible
// setup 环境 执行默认是created 和 beforeCreated 周期
quickReplyList.value.forEach((v, i) => {
  quickVisible.value[`quickVisible${i}`] = false;
});

const isQuickReply = ref(false);

const quickReply = (e) => {
  if (e) {
    isQuickReply.value = !isQuickReply.value;
  } else {
    isQuickReply.value = false;
  }
};
const moveTopMsg = (e, i) => {
  if (i === 0) return;

  quickReplyList.value.splice(
    0,
    0,
    quickReplyList.value.splice(
      quickReplyList.value.findIndex((v) => v.id === e.id),
      1
    )[0]
  );
  // 这里还是很快速，待解决。
  nextTick(() => {
    quickVisible.value[`quickVisible${i}`] = false;
  });
};
const deleteMsg = (e, i) => {
  quickReplyList.value.splice(
    quickReplyList.value.findIndex((v) => v.id === e.id),
    1
  );
  // 这里还是很快速，待解决。
  nextTick(() => {
    quickVisible.value[`quickVisible${i}`] = false;
  });
};
const quickReplyMsg = (val) => {
  console.log("val----------1----------", val);
  toSendMsg(val.msg);
  isQuickReply.value = false;
};

// 1 被邀请方弹出对话框
const invitedDialog = (val, type) => {
  console.log("点击了1同意2拒绝", val, "pk-type:", type);
  // 发送邀请请求
  invitedSide(val, type);
  // 条件 邀请成功 才调用刷新数据
  reloadTeamInfoByInvited(val, type);
  // getCreateTeamInfo();
  // 推流
  // invitelinkToPK();
};
//2 被邀请方这边操作同意or拒绝请求
const invitedSide = (agreeOrReject, type = 1) => {
  store.socketOB.socketSendMessage({
    c: "room",
    m: "videopkteamupcheck",
    data: {
      status: agreeOrReject, // 1同意 2拒绝
      type,
      teamid: store.teamId,
    },
  });
};
// 渲染座位的数据
const renderSeatData = () => {
  if (store.isTakeTeamInfo) {
    seatArr.value=store.createTeamInfo;
    console.log("seatArr============++++", seatArr.value);
    store.isLivePkDialog = true;
    isShowSeat.value = true;
  } else {
    setTimeout(() => {
      renderSeatData();
    }, 500);
  }
};

//3 重新刷新获取团队数据   形参type：指pk类型。
const reloadTeamInfoByInvited = (isjoin, type = 1) => {
  console.log(
    "3 重新刷新获取团队数据store.OtherSideAgree",
    store.OtherSideAgree
  );
  if (store.OtherSideAgree) {
    if (store.OtherSideInfo?.isjoin === 1) {
      if (type === 1) {
        doLoopGetCreateTeamInfo(isjoin);
      }
      if (type === 2) {
        renderSeatData();
      }

      store.socketOB.socketSendMessage({
        c: "room",
        m: "videoformatteamdata",
        data: {
          type,
          teamid: store?.teamId,
        },
      });
    }
    store.isWatchOthrInvite = false;
    store.OtherSideAgree = false;
  } else {
    setTimeout(() => {
      reloadTeamInfoByInvited(isjoin, type);
    }, 500);
  }
};
const token11 = ref("");
const token22 = ref("");
const closePlayDialog=()=>{
  isPlayDialog.value=false;
  store.mapperFoot['foot3']=false;
}
// todo
onMounted(async () => {
  testDelete();
  getResoures();
  store.handleFollow();
  // ipcRenderer.send('request-screen-permission');
  getRoomList();
  // 获取设备列表
  initDeviceList();
  // 渲染左边数据
  getonlineuser();
  // 获取房间的信息
  let roomRes = await getMyRoomInfo(store.loginer.jwt);
  console.log('roomRes======================',roomRes);
  // 获取推流信息【token channel】
  let token = await getToken({
    jwt: store.loginer.jwt,
    roomid: Number(roomRes.data.list[0].id),
  });
  player.value = { ...token };
  // 进入房间
  doJoinRoom();
});

const handleRigTab = (val) => {
  chooseItem.value = val.id;
  if (chooseItem.value === 2) {
    mikeAsk();
  } else if (chooseItem.value === 3) {
    mikeManage();
  }
};
const mapperMinTabs = ref({
  1: store.minMsgList,
  2: store.rightMsgList,
  3: store.minMsgList,
});
const handleMinTab = (val) => {
  currVal.value = val.id;
  console.log(" currVal.value:", currVal.value);
};
const handleLefTab = (val) => {
  leftTabCurr.value = val.id;
};
// const handleLefIco=(val)=>{
//   console.log('val_icon',val);
// }
// const handleRigIco=(val)=>{
// console.log('val_icon',val);
// }

const handleIcos = (val) => {
  if (val === 11) {
    console.log("打开礼物盒子");
    store.isGiftDialog = !store.isGiftDialog;
  }
  if (val === 10) {
    console.log("1111111111111pk");
    store.isLivePkDialog = true;
  }
};
</script>

<style scoped lang="scss">
.main_container {
  height: calc(100vh - 120px);
  // width: 100%;
  display: flex;
  padding-bottom: 8px;
  box-sizing: border-box;

  background: #232729;
  .left {
    min-width: 450px;
    // border: 2px solid red;
    display: flex;
    flex-direction: column;
    padding: 18px 10px 0 0;
    box-sizing: border-box;
    // display: flex;
    // justify-content: space-between;
    // background: rgb(231, 203, 151);
    .left_up_out {
      .micro {
        // margin-left: 20px;
        justify-content: center;
        padding: 10px 0;
        // position: absolute;
        display: flex;
        // bottom: 20px;
        // left: 98px;
        .btn {
          padding: 5px 15px;
          background: #895cf8;
          border-radius: 50px 50px 50px 50px;
        }
        .btn:first-child {
          margin-right: 19px;
        }
        .btn:active {
          box-shadow: 0 0 4px 4px rgb(137, 92, 248, 0.5);
        }
      }
    }
    .left_up {
      padding-left: 11px;
      // padding-bottom: 63px;
      box-sizing: border-box;
      // position: relative;//
      // flex: 1;

      display: flex;
      justify-content: space-between;
      .left_up_left {
        display: flex;
        .img_box {
          width: 87px;
          height: 87px;
          img {
            width: 100%;
            height: 100%;
          }
          // background: orange;
          border-radius: 50%;
        }
        .info {
          padding: 7px 11px;
          box-sizing: border-box;

          font-style: normal;
          text-transform: none;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          .name {
            margin-bottom: 18px;

            font-size: 18px;
          }
          .id {
            font-size: 14px;
            color: #a7a6ab;
          }
        }
      }
      .left_up_right {
        margin-top: 47px;
        .sorts {
          padding: 2px;
          display: flex;
          padding: 0 11px;
          box-sizing: border-box;
          background: #393d3f;
          border-radius: 50px 50px 50px 50px;
        }
        .sort_name {
          line-height: 26px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          font-style: normal;
          text-transform: none;
        }
        .sorts:not(:last-child) {
          margin-bottom: 13px;
        }
        .img_box {
          width: 27px;
          height: 26px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .img_box:first-child {
          margin-right: 5px;
        }
        .img_box:last-child {
          margin-right: 14px;
        }
      }
    }
    .left_down {
      height: calc(100% - 161px);
      display: flex;
      flex-direction: column;
      // flex: 1;
      .lists {
        width: 451px;
        display: flex;
        background: #282c2f;
        border-radius: 0px 10px 0px 0px;
        .item {
          text-align: center;
          padding: 15px 0;
          // flex: 1;
          width: 25%;
          box-sizing: border-box;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          // text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .active_tab {
          color: #895cf8;
        }
      }
      .overflow_box {
        // border: 1px solid red;
        overflow-y: auto;
        // height: 607px;
        flex: 1;
      }
      .isSelec {
        box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3) !important;
      }
      .item_content {
        overflow-y: auto;
        padding: 15px 10px;
        box-sizing: border-box;
        flex: 1;

        box-sizing: border-box;

        .avatar {
          width: 60px;
          height: 60px;
          background: #ffffff;
          border-radius: 50%;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          .muted_avatar {
            position: absolute;
            bottom: -6px;
            right: -4px;
            width: 25px;
            height: 25px;
          }
        }
        .info {
          padding: 8px 9px;
          .icons_sort {
            margin-top: 10px;

            // .bg_sort:first-child {
            //   width: 24px;
            //   height: 12px;
            //   background-image: url("../assets/icon_purple.png");
            //   background-size: 100% 100%;
            //   background-repeat: no-repeat;
            //   padding-left: 15px;
            //   line-height: 12px;
            //   margin-right: 4px;
            // }
            // .bg_sort:last-child {
            //   width: 35px;
            //   height: 13px;
            //   background-image: url("../assets/icon_pink.png");
            //   background-size: 100% 100%;
            //   background-repeat: no-repeat;
            //   padding-left: 24px;
            //   line-height: 13px;
            // }
          }
        }
      }
    }
  }
  .mind {
    flex: 1;
    padding-top: 7px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .player_column {
      padding: 0 200px;
      box-sizing: border-box;
    }
    .player {
      display: flex;
      // width: 730px;
      // min-height: 495px;
      // border: 1px solid red;
      flex: 1;
      background: #1d1f22;
      // background: pink;
      border-radius: 0px 0px 0px 0px;
      position: relative;
      // start
      .flayer_box {
        background: rgb(207, 230, 173);
        width: 100%;
        height: 100%;
        display: flex;
        .me {
          flex: 1;
          // background: rgb(119, 0, 255);
        }
        .other {
          flex: 1;
          display: flex;
          flex-direction: column;
          // background: rgb(255, 102, 0);
          .item {
            // border: 1px solid rgb(241, 173, 71);
            flex: 1;
          }
        }
        .common {
          width: 50%;
          height: 50%;
          box-sizing: border-box;
          // border: 1px solid red;
        }
      }
      /* v-else */
      .flayer_box2 {
        flex-wrap: wrap;
        .common {
          width: 50%;
          height: 50%;
          box-sizing: border-box;
          // border: 1px solid red;
        }
      }

      //end todo
      .closePlayer {
        display: none;
        position: absolute;
        left: 50%;
        top: 85%;
        transform: translate(-50%);
        width: 184px;
        height: 40px;
        // padding: 11px 0;
        box-sizing: border-box;
        background: #45484b;
        border-radius: 50px 50px 50px 50px;
        color: #939596;
        font-size: 18px;
        text-align: center;
        line-height: 40px;
        z-index: 99999;
      }
    }
    .player:hover {
      .closePlayer {
        display: block;
      }
    }
    .mind_up {
      // border: 2px solid red;
      display: flex;
      justify-content: center;
      align-items: center;
      // margin-top: 36px;
      padding-top: 36px;
      // padding: 36px 200px 14px;

      box-sizing: border-box;
      // background: #1D1F22;
      background: #1d1f22;

      .mind_up_inner {
        .startPlay {
          text-align: center;
          margin: auto;
          padding: 4px 59px;
          border-radius: 50px 50px 50px 50px;
          background: #45484b;
        }
        // 等待状态
        .active_startPlay {
          background: linear-gradient(90deg, #a13cf3 0%, #7e6bfb 100%);
        }
        :deep(.el-input__inner) {
          height: 38px;
        }
        :deep(.el-select__wrapper) {
          height: 38px;
        }
        .title {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .device_box {
          display: flex;
          justify-content: center;
          width: 100%;

          .deviceTyp {
            display: flex;
            justify-content: center;
            align-content: center;
            span {
              display: inline-block;
              line-height: 26px;
            }
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #707070;
            padding: 6px 33px 0 28px;
            box-sizing: border-box;
            img {
              width: 26px;
              height: 26px;
            }
          }
          .deviceTyp:last-child {
            margin-left: 38px;
          }
          .active_devi {
            border: 1px solid #895cf8;
            color: #895cf8;
          }
        }
      }
    }
    .mind_down {
      flex: 1;
      // min-height: 355px;
      // todo
      // border: 1px solid red;
      // todo

      position: relative;
      overflow: auto; //11-19 add
      .random_box {
        position: absolute;
        right: 11px;
        bottom: 90px;
        width: 114px;
        height: 140px;
        background: #f07ad2;
        border-radius: 6px 6px 6px 6px;
        // img{
        //   width: 100%;
        //   height: 100%;
        //   border-radius: 6px 6px 6px 6px;
        // }
      }

      // display: flex;
      // flex-direction: column;
      padding-top: 18px;
      margin-top: 8px;
      // border: 1px solid red;
      box-sizing: border-box;
      // background: #e06ec4;
      background: #1d1f22;
      .inner {
        height: 100%;
        border-radius: 8px 8px 8px 8px;
        padding-left: 15px;
        box-sizing: border-box;
      }
      .tabs {
        display: flex;
        width: 363px;
        background: #141618;
        border-radius: 50px 50px 50px 50px;
        text-align: center;
        .tabs_item {
          padding: 6px 17px;
          width: 33.3%;
          box-sizing: border-box;
          cursor: pointer;
          color: #939596;
        }
        .active_tab {
          background: #434546;
          color: #ffffff;
          border-radius: 50px 50px 50px 50px;
        }
        .tabs_item:active {
          background: #434546;
          color: #ffffff;
          border-radius: 50px 50px 50px 50px;
        }
      }
      .out {
        // flex: 1;
        height: calc(100% - 33px);
        display: flex;
        flex-direction: column;
      }
      .content {
        flex: 1;
        margin: 20px 0;
        max-width: 521px;
        border-radius: 4px 4px 4px 4px;

        // opacity: 0.3;
        .txt {
          // background: #000000;
          background-image: url("../assets/main_imgs/bg_txt.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          font-size: 14px;
          padding: 7px 10px;
          box-sizing: border-box;
          // animation: move 2s linear forwards;
        }
        .txt2 {
          height: 34px;
          background: #000000;
          border-radius: 4px 4px 4px 4px;
          opacity: 0.3;
          justify-content: center;
          padding-left: 10px;

          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          color: #efe28b;
        }
        // .move {
        //   transform: translate(0, 100vw); /* 移动到视口右侧 */
        // }
        // @keyframes move {
        //   0% {
        //     transform: translateX(0); /* 从左边开始 */
        //   }
        //   100% {
        //     transform: translateX(200px); /* 移动到视口右侧 */
        //   }
        // }
        .txt:not(:last-child) {
          margin-bottom: 23px;
        }
      }
      .icons {
        display: flex;
        .left_item,
        .right_item {
          display: flex;
        }

        img {
          width: 36px;
          height: 36px;
        }
        display: flex;
        justify-content: space-between;
        padding: 7.5px 0;
        box-sizing: border-box;
        .item {
          padding: 0 7.5px;
          box-sizing: border-box;
          cursor: pointer;
        }
      }
    }
  }
  .right {
    // flex: 1;
    // width: 483px;
    min-width: 415px;
    padding: 7px 8px 0 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .right_up {
      flex: 1;
      // background: rgb(80, 216, 221);
      // background: #1d1f22;
      .switch {
        padding: 13px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .tabs {
        display: flex;
        align-items: center;
        text-align: center;
        // background: #282c2f;
        border-radius: 0px 0px 0px 0px;
        font-size: 16px;
        .item {
          padding: 20px 0;
          box-sizing: border-box;
          flex: 1;
        }
        .active_tab {
          color: #895cf8;
        }
      }
      .chat_text {
        padding: 24px 12px;
        box-sizing: border-box;
        .avator {
          width: 62px;
          height: 62px;
          background: #ffffff;
          border-radius: 50%;
          margin-right: 13px;
          img {
            width: 62px;
            height: 62px;
            border-radius: 50%;
          }
        }

        .btn {
          padding: 7px 23px;
          box-sizing: border-box;
          font-size: 12px;
          background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
          border-radius: 50px 50px 50px 50px;
        }
        .two_btn > .reju:active {
          box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.3);
        }
      }
      .out_msg_bg {
        padding: 25px 7px;
        margin-top: 25px;
        background: #1d1f22;
        height: 310px;
        overflow-y: scroll;
        // border: 1px solid red;
      }
      .msg_bg {
        background: #000000;
        border-radius: 4px 4px 4px 4px;
        opacity: 0.7;
        // max-width: 146px;
        // background-image: url("../assets/msg_bg.png");
        // background-size: 100% 100%;
        // background-repeat: no-repeat;

        // object-fit: contain;
        // width: 382px;
        // max-height: 73px;
        padding: 10px 0 17px 17px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-style: normal;
        text-transform: none;
        font-weight: 400;
        justify-content: center;
        .info {
          color: #efe28b;
        }
        .msg {
          color: #ffffff;
        }
      }
      .msg_bg:not(:last-child) {
        margin-bottom: 15px;
      }
      .msg_bg:last-child {
        margin-bottom: 73px;
      }
    }
    .right_down {
      position: relative;
      .fastReply {
        width: 335px;
        height: 400px;
        background: #282c2f;
        border-radius: 10px 10px 10px 10px;
        position: absolute;
        top: -300px;
        right: 18px;
        padding-top: 13px;

        .title {
          padding: 0 20px;
          .right_close {
            padding: 2px 5px;
          }
          .right_close:hover {
            background: #393d3f;
          }
          .left_btn {
            padding: 7px 15px;
            background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
            border-radius: 50px 50px 50px 50px;
          }
          .left_btn:active {
            box-shadow: 0 0 4px 4px rgb(161, 60, 243, 0.3);
          }
        }
        .content {
          margin: 25px 0;
          overflow: auto;
          flex: 1;
          padding: 0 20px;
          .add_btn {
            margin: 50px auto 44px;
            width: 133px;
            padding: 6px 40px;
            background: #45484b;
            border-radius: 50px 50px 50px 50px;
          }
          .txt:first-child {
            margin-top: 0;
          }
          .txt {
            margin-top: 17px;
            padding-bottom: 9px;
            // width: 292px;
            border-bottom: 1px solid #393b3d;
            .txt_inner {
              white-space: nowrap; /* 防止文本换行 */
              overflow: hidden; /* 隐藏溢出的文本 */
              text-overflow: ellipsis; /* 使用省略号代替溢出的文本 */
              max-width: 200px;
            }
          }
        }
      }
      .img_box {
        display: flex;
        align-items: center;
        padding: 10px 6px;
        box-sizing: border-box;
        background: #282c2f;
        border-radius: 8px 8px 0px 0px;
        .imgs {
          width: 34px;
          height: 34px;
          margin-right: 2px;
          // box-sizing: border-box;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #939596;
          font-style: normal;
          text-transform: none;
        }
      }
      .btn_box {
        // position: relative;

        position: absolute;
        right: 13px;
        bottom: 19px;
        .btn:first-child {
          // width: 69px;
          // height: 30px;
          padding: 10px;
          background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
          border-radius: 50px 50px 50px 50px;
          margin-right: 5px;
        }
        .btn:last-child {
          // width: 69px;
          // height: 30px;
          padding: 9px 22px;

          background: #45484b;
          border-radius: 50px 50px 50px 50px;
        }
      }
      :deep(.el-textarea__inner) {
        background-color: #1d1f22;
        border-radius: 0px 0px 8px 8px;
        box-shadow: none;
        width: 100%;
        // height: 124px;
        color: #ffffff;
      }
    }
  }
  .flex_bt {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  // pk
  :deep(.el-dialog) {
    width: 398px;
    height: 579px;
    background: #100d16;
    // background: #925ff7;
    border-radius: 0px 0px 0px 0px;
  }
  :deep(.el-dialog__body) {
    flex: 1;
  }
  :deep(.el-dialog__close) {
    font-size: 24px;
    color: #909399;
  }
  // 自定义dialog
  .playDialog {
    .clos_img {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 9px;
      right: 9px;
    }
    .title_dial {
      padding: 20px;
      width: 100%;
      text-align: center;
    }
    background: #282c2f;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 500px;
    padding: 15px;
    .mind_up_inner {
      height: 100%;
      .device_box {
        display: flex;
        justify-content: center;

        width: 100%;
        .deviceTyp {
          display: flex;
          justify-content: center;
          align-content: center;
          span {
            display: inline-block;
            line-height: 26px;
          }
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #707070;
          padding: 6px 33px 0 28px;
          box-sizing: border-box;
          img {
            width: 26px;
            height: 26px;
          }
        }
        .deviceTyp:last-child {
          margin-left: 38px;
        }
        .active_devi {
          border: 1px solid #895cf8;
          color: #895cf8;
        }
      }

      .startPlay {
        text-align: center;
        margin: 180px auto 0;
        padding: 4px 59px;
        border-radius: 50px 50px 50px 50px;
        background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
      }
    }
  }
}
// .bg_sort:first-child {
//   width: 24px;
//   height: 12px;
//   background-image: url("../assets/icon_purple.png");
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   padding-left: 15px;
//   line-height: 12px;
//   margin-right: 4px;
// }
// .bg_sort:last-child {
//   width: 35px;
//   height: 13px;
//   background-image: url("../assets/icon_pink.png");
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   padding-left: 24px;
//   line-height: 13px;
// }

/* 设置全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条的宽度 */
  height: 8px; /* 水平滚动条的高度 */
}
::-webkit-scrollbar-track {
  background: rgb(44, 46, 48);
  /* 滚动条背景 */
  border-radius: 10px; /* 背景圆角 */
}
::-webkit-scrollbar-thumb {
  /* 滚动条的颜色 */
  background: #555;
  border-radius: 10px; /* 滚动条的圆角 */
}
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滚动条悬停时的颜色 */
}
/* 额外样式：可以为不同的方向添加样式 */
::-webkit-scrollbar-corner {
  background: #f1f1f1; /* 窗口的角落色 */
}
</style>
